<template>
  <div class="feedback">
      <textarea name="ques" class="ques" v-model="question" placeholder="请将疑惑或者问题告诉我们" />
      <div class="btn-create" @click="submit">
        <p>反馈</p>
      <img src="/static/img/btn_back.png">
    </div>

    <cover :config="{title: '感谢您的反馈', img: '/static/img/mine/thank.png'}" v-if="showCover"></cover>
  </div>
</template>

<script>
import { timeStamp, userLogin } from '@/utils/index'
import cover from '@/components/cover'
export default {
  data () {
    return {
      question: '',
      showCover: false
    }
  },
  components: {
    cover
  },
  methods: {
    async submit () {
      if (this.question.length < 10) {
        wx.showToast({
          icon: 'none',
          title: '意见反馈最少需要填写10个字符！'
        })
        return
      }
      var that = this
      var userInfo = wx.getStorageSync('userInfo')
      var data = {
        feedback: this.question,
        mobile: JSON.parse(userInfo).mobile,
        openId: wx.getStorageSync('openId'),
        userId: wx.getStorageSync('userId'),
        dateTime: timeStamp(new Date().getTime()),
      }
      if (this.id) {
        data.id = this.id
      }
      var res = await this.$request({
        type: 'POST',
        url: '/GroupBuyBackendV1/userSuggestion',
        data: data
      })
      
      if (res.id) {
        this.id = res.id
        this.showCover = true
        setTimeout(function () {
          that.showCover = false
        }, 2000)
      }
    }
  },
  mounted () {
    userLogin()
  },
  onUnload () {
    this.id = ''
    this.question = ''
  }
}
</script>

<style lang="stylus" scoped>
.feedback {
  padding: 40rpx 30rpx
  width: 100%
  box-sizing: border-box
}
.ques {
  width: 100%
  height: 300rpx
  font-size: 32rpx
}
.btn-create {
  width: 100%
  bottom: 0
  left: 0
  position: absolute

  img {
    height: 94rpx
    width: 100%
  }
  p {
    color: #fff
    position: absolute
    width: 100%
    height: 94rpx
    text-align: center
    line-height: 94rpx
    left: 0
    top: 0
  }
}
</style>
